<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
    <title>贪吃蛇</title>
    <style>
        body{
            background-color: black;
            text-align: center;
        }
        table{
            margin: 0 auto;
            border-collapse:collapse;
        }
        table td{
            width: 20px;
            height: 20px;
            border: 0px solid sandybrown;
        }
        table .snakes{
            background-color:darkgreen;
        }
        table .foods{
            background-color: orangered;
        }
    </style>
    <script>
        var rows=20;
        var cols=20;
        var foodx=15;
        var foody=15;
        var preposition=39;
        var starttime;
        count=0;
        var snaketab=[];
        for(var i=0; i<rows*cols; i++){//生成二维数组
            var snake1={
                snakex:15,
                snakey:15
            }
            snaketab.push(snake1);
        }
        /*初始化函数，创建表格*/
        function tablenum() {
            var html = [];
            html.push("<table>");
            for (var x = 0; x <= rows; x++) {
                html.push("<tr>");
                for (var y = 0; y <=cols; y++) {
                    if(tableshe2[x][y]==1) {
                        html.push('<td style="background-color: darkgoldenrod" id="box_' + y + "_" + x + '"> </td>');
                    }
                    else{
                        html.push('<td id="box_' + y + "_" + x + '"> </td>');
                    }
                }
                html.push("</tr>");
            }
            html.push("</table>");
            document.getElementById("zuobiaozhou").innerHTML = html.join("");
            document.getElementById("box_" + foodx + "_" + foody).className = "foods";
            for (var i = 0; i < count; i++) {
                if (snaketab[i].snakex >=0 && snaketab[i].snakey <=20 && snaketab[i].snakey >=0 && snaketab[i].snakex <=20) {
                    document.getElementById("box_" + snaketab[i].snakex + "_" + snaketab[i].snakey).className = "snakes";
                }
            }
        }
        function key(e){
            var event=window.event||e
            if(event.keyCode==80){
                pause();
            }
            else if (preposition==39||preposition==37){
                if(event.keyCode==38){
                    preposition=38;
                    tailnum();
                    snaketab[0].snakey--;
                    tablenum();
                }
                if(event.keyCode==40){
                    preposition=40;
                    tailnum();
                    snaketab[0].snakey++;
                    tablenum();
                }
            }
            else if (preposition==38||preposition==40) {
                if (event.keyCode == 37) {
                    preposition=37;
                    tailnum();
                    snaketab[0].snakex--;
                    tablenum();
                }
                if(event.keyCode == 39){
                    preposition=39;
                    tailnum();
                    snaketab[0].snakex++;
                    tablenum();
                }
            }

        }
        function snake(){
            document.addEventListener("keyup",key);
            outborder();
            eattail();
        }
        function tailnum() {
            productfood();
            for (var i = count-2;i>=0;i--) {
                snaketab[i+1].snakex = snaketab[i].snakex;
                snaketab[i+1].snakey =snaketab[i].snakey;
            }
        }
        function outborder(){//穿墙代码
            if(snaketab[0].snakex>=0&&snaketab[0].snakex<=20) {

               if(snaketab[0].snakey<0){
                    snaketab[0].snakey=cols+1;
                }
                else if(snaketab[0].snakey>20){
                    snaketab[0].snakey=-1;
                }
               else if (tableshe2[snaketab[0].snakey][snaketab[0].snakex] == 1) {
                    alert("撞墙了！！！");
                    window.location.href = "she2.html"
                }
            }
            if(snaketab[0].snakey>=0&&snaketab[0].snakey<20) {
                if (snaketab[0].snakex <0) {
                    snaketab[0].snakex = rows+1;
                }
                else if (snaketab[0].snakex > rows) {
                    snaketab[0].snakex =-1;
                }
            }
        }
        function eattail(){
            for(var j=count-1;j>2;j--) {
                if (snaketab[0].snakex == snaketab[j].snakex && snaketab[0].snakey == snaketab[j].snakey) {
                    alert("咬尾巴啦！");
                    window.location.reload();
                }
            }
        }
        function productfood(){
            for (var i = count;i>=0;i--) {
                if (snaketab[i].snakex== foodx && snaketab[i].snakey == foody) {
                    foodx = Math.floor(Math.random() * rows);
                    foody = Math.floor(Math.random() * cols);
                    count++;
                    score();
                }
            }
            if(tableshe2[foody][foodx]==1){
                foodx = Math.floor(Math.random() * rows);
                foody = Math.floor(Math.random() * cols);
            }
        }
        function init(){
            console.log(snaketab[0].snakex+"and"+snaketab[0].snakey)
            productfood();
            tailnum();
            outborder();
            if (preposition==39){
                snaketab[0].snakex++;
                tablenum();
                preposition=39;

            }
            if (preposition==37 ){
                snaketab[0].snakex--;
                tablenum();
                preposition=37;
            }
            if (preposition==38){
                snaketab[0].snakey--;
                tablenum();
                preposition=38;
            }
            if (preposition==40){
                snaketab[0].snakey++;
                tablenum();
                preposition=40;
            }
            eattail();
        }
        function score(){
            var foodscore=document.getElementById("score");
            foodscore.innerHTML="你的得分为"+(count-1)*10;
            if((count-1)==10){
                alert("过关了！！进入第二关");
                window.location.href="she1.html"
            }
        }
        function start(){
            starttime=self.setInterval('init()',500);
            snake();
            var button=document.getElementById("button");
            button.disabled=true;
        }
        function pause(){
            window.clearInterval(starttime);
            document.removeEventListener("keyup",key);
            var button=document.getElementById("button");
            button.disabled=false;
        }
    </script>
</head>
<body>
<script src="tableshe.js"></script>
<input id="button" type="button" value="开始" onclick="start()"/>
<div id="zuobiaozhou"></div>
<div id="score" style="color: red"></div>
<div style="color: red"><strong>友情提示：按P可暂停</strong></div>
</body>
</html>